import React, { Component } from 'react';
import './Search.style.scss'
import {get} from 'api/http'

class Search extends Component {
    constructor(){
        super()
        this.state={
            datalist:{},
            txt:'',
            searchList:[]
        }
    }
    async getData(){
        let res =await get("/api/searchPage")
        console.log(res.data.data)
        this.setState({
            datalist:res.data.data
        })
    }
    handleKeydown($event){
        if($event.keyCode===13){
            this.setState({
                txt:this.refs.keyword.value
            },async ()=>{
                let rs =await get(`http://localhost:3030/datalist?q=${this.state.txt}`)
                this.setState({
                    searchList:rs.data
                })
            })  
        }
    }
    render() {
        return (
            <div className="search">
                <div className="head">
                    <div className="con">
                        <img src="https://oss.flowerplus.cn/oss_svg/2020-07-02/15936611046453.svg" alt=""/>
                        <input ref="keyword" onKeyDown={($event)=>this.handleKeydown($event)} placeholder="搜索商品" type="text"/>
                    </div>
                </div>
                <div className={this.state.txt?"noHot":"hot_search"}>
                    <p>大家都在搜</p>
                    <div className="example">
                       {
                            this.state.datalist.hot_search&&this.state.datalist.hot_search.map((item,index)=>{
                                return (
                                    <span key={index}>{item.tag}</span>
                                )
                            })
                        } 
                    </div>
                </div>
                <div className={this.state.txt?"noRecommend":"goods_recommend"}>
                    <h3>本周好物推荐</h3>
                    <div className="top">
                        {
                            this.state.datalist.recommend&&this.state.datalist.recommend.map((item,index)=>{
                                return (
                                    <div key={index}>
                                        <img src={item.img} alt=""/>
                                        <p>{item.title}</p>
                                        <span>￥{item.price}</span>
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>
                <div className={this.state.txt?"result":"noResult"}>
                    <p>以下是与“{this.state.txt}”相关的内容</p>
                    <div className="result_list">
                        {
                            this.state.searchList&&this.state.searchList.map((item,index)=>{
                                return (
                                    <div key={index}>
                                        <img src={item.img} alt=""/>
                                        <p>{item.name}</p>
                                        <span>浏览{item.all_click}</span>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <em>没有更多了</em>
                </div>
            </div>
        );
    }
    componentDidMount(){
        this.getData();
    }
}

export default Search;